<template>
  <div
    style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center"
  >
    <el-divider
      :direction="props.direction"
      :content-position="props.contentPosition"
      :border-style="props.borderStyle"
      :style="getDividerStyle()"
    >
      {{ props.text }}
    </el-divider>
  </div>
</template>

<script setup lang="ts">
import { ElDivider } from 'element-plus';

const props = defineProps({
  text: {
    type: String,
    default: ''
  },
  direction: {
    type: String as () => 'horizontal' | 'vertical',
    default: 'horizontal'
  },
  contentPosition: {
    type: String as () => 'left' | 'right' | 'center',
    default: 'center'
  },
  borderStyle: {
    type: String as () => 'solid' | 'dashed' | 'dotted',
    default: 'solid'
  },
  borderColor: {
    type: String,
    default: '#dcdfe6'
  },
  textColor: {
    type: String,
    default: '#303133'
  },
  backgroundColor: {
    type: String,
    default: '#ffffff'
  }
});

const getDividerStyle = () => {
  const style: Record<string, string> = {};

  if (props.borderColor) {
    style.borderColor = props.borderColor;
  }

  if (props.textColor) {
    style.color = props.textColor;
  }

  if (props.backgroundColor) {
    style.backgroundColor = props.backgroundColor;
  }

  if (props.direction === 'horizontal') {
    style.width = '100%';
  } else {
    style.height = '100%';
  }

  return style;
};
</script>
